<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .main {
            position: relative;
            width: 600px;
            height: 230px;
            font-size: 20px;
        }

        .main>img {
            position: absolute;
            top: 0;
            left: 0;
        }

        .main>img:first-child {
            z-index: 1;
        }
    </style>

</head>

<body>

    <canvas>

    </canvas>
    <div class="main" id="main">

        <img src="./img/bg1.jpg" alt="">
        <img src="./img/bg2.jpg" alt="">
        <img src="./img/bg3.jpg" alt="">
    </div>

    <script>

        var mainDiv = document.getElementById("main");

        var imgs = mainDiv.getElementsByTagName("img");

        var currIndex = 0;
        var timer = null;

        function StartAutoPlay() {
            timer = setInterval(function () {
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].style.zIndex = "0";
                }

                imgs[currIndex].style.zIndex = "1";

                currIndex++;

                if (currIndex == imgs.length) {
                    currIndex = 0;
                }


            }, 2000);
        }

        function StopAutoPlay() {
            clearInterval(timer);
            return "hello,man";
        }

        //undefined

        StartAutoPlay();


        mainDiv.onmouseenter = StopAutoPlay;

        //dom0
        mainDiv.addEventListener("mouseenter", StopAutoPlay);

        mainDiv.onmouseleave = StartAutoPlay;

    </script>
</body>

</html>